<template>
  <!--新增编辑-->
  <el-dialog
      :title="type === 'add' ? '新增资源' : '编辑资源'"
      v-el-drag-dialog
      v-if="showDom"
      :visible.sync="visible"
      width="720px"
      center
      @closed="closed">
    <div class="form-body">
      <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          size="small"
          label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="资源名称" prop="resName">
              <el-input v-model="form.resName" placeholder="请填写资源名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资源IP" prop="resIp">
              <el-input v-model="form.resIp" placeholder="请填写IP地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资源端口" prop="resPort">
              <el-input v-model="form.resPort" type="number" placeholder="检测端口">
                <el-button
                    slot="append"
                    type="success"
                    class="jiance-btn"
                    @click="testingPort"
                    :loading="testingBtnLoading">检测
                </el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="在线状态" prop="resOnline">
              <el-input v-model="form.resOnlineName" type="text" readonly placeholder="检测状态">
                <el-button
                    slot="append"
                    type="success"
                    @click="testingStatus"
                    :loading="statusBtnLoading">检测
                </el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资源类型" prop="resType">
              <el-select v-model="form.resType" placeholder="请选择资源类型">
                <el-option label="服务器资源" :value="0"></el-option>
                <el-option label="硬件资源" :value="1"></el-option>
                <el-option label="其他" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资源组" prop="groupId">
              <el-select v-model="form.groupId" placeholder="请选择所属分组">
                <el-option
                    v-for="item in Group"
                    :key="item.id"
                    :label="item.groupName"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资源厂家" prop="vendorId">
              <el-select v-model="form.vendorId" placeholder="请选择所属分组">
                <el-option
                    v-for="item in Vendor"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作系统" prop="resOptsys">
              <el-select
                  v-model="form.resOptsys"
                  placeholder="请选择使用系统">
                <el-option
                    v-for="item in systemOptions"
                    :key="item.id"
                    :label="item.systemName"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="input" v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="hide">取 消</el-button>
        <el-button v-if="type === 'add'" size="small" type="primary" @click="resultEnt">确 定</el-button>
        <el-button v-else size="small" type="primary" @click="resultEnt">保存修改</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {put_putResource, put_editResource, get_getResourceGroup} from "@/apis/resource/resource";
import {get_getSystem} from "@/apis/assembly/assembly";
import {get_VendorList} from "@/apis/user/userApi";

export default {
  name: "update-dialog",
  data() {
    return {
      type: 'add',
      showDom: false,
      visible: false,

      Vendor: [],
      Group: [],
      systemOptions: [],
      form: {
        resName: "",
        resIp: "",
        resPort: "",
        resType: "",
        resOnline: "",
        resOnlineName: "",
        resOptsys: "",
        vendorId: "",
        groupId: "",
        remarks: "",
      },
      rules: {},
      testingBtnLoading: false,
      statusBtnLoading: false,
    }
  },
  methods: {
    show({type, data}) {
      this.type = type
      this.showDom = true
      this.visible = true
      if (type === 'add') {
        this.form = {
          resName: "",
          resIp: "",
          resPort: "",
          resType: "",
          resOnline: "",
          resOnlineName: "",
          resOptsys: "",
          vendorId: "",
          groupId: "",
          remarks: "",
        }
      } else {
        for (const key in this.form) {
          this.form[key] = data[key];
        }
        this.form.id = data.id
        this.form.vendorId = data.vendor.id
        this.form.groupId = data.rgroup.id;
        this.form.resOptsys = data.psystem.id;
      }

      this.getVendor()
    },
    hide() {
      this.visible = false
    },
    closed() {
      this.showDom = false
    },
    getVendor() {
      get_VendorList().then((res) => {
        let {data} = res.data;
        this.Vendor = []
        for (const key in data) {
          this.Vendor.push({value: key, label: data[key]});
        }
      });
      get_getResourceGroup().then((res) => {
        this.Group = res.data.data
      });
      //系统下拉
      get_getSystem().then((res) => {
        this.systemOptions = res.data.data;
      });
    },
    // 检测
    testingPort() {
      if (!this.form.resPort) {
        return this.$message.error('请填写端口！')
      }
      this.testingBtnLoading = true
      setTimeout(() => {
        this.$message.success('检测成功！')
        this.testingBtnLoading = false
      }, 1000)
    },
    testingStatus() {
      this.statusBtnLoading = true
      setTimeout(() => {
        this.form.resOnlineName = '在线'
        this.$message.success('检测成功！')
        this.statusBtnLoading = false
      }, 1000)
    },
    // 确认弹框
    resultEnt() {
      if (this.type === 'add') {
        put_putResource(this.form).then((res) => {
          let {code, msg} = res.data;
          if (code === 0) {
            this.$message.success(msg);
            this.$emit('success')
            this.hide()
          }
        });
      } else {
        put_editResource(this.form).then((res) => {
          let {code, msg} = res.data;
          if (code === 0) {
            this.$message.success(msg);
            this.$emit('success')
            this.hide()
          }
        });
      }
    },
  }
}
</script>

<style scoped>

</style>